@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.el-textarea .el-input__count {
  color: #C0C4CC;
}

// @author lin.wj
.click-disable {
  pointer-events: none;
}

.border,
.border-solid {
  border: 1px solid #dddddd;
}

.border-dashed {
  border: 1px dashed #dddddd;
}

.radius-5px {
  border-radius: 5px;
}

.radius-1rem {
  border-radius: 1rem;
}

.radius-1em {
  border-radius: 1em;
}

.w-100 {
  width: 100%;
}

.w-10r {
  width: 10rem;
}

.w-2r {
  width: 2rem;
}

.w-1r {
  width: 1rem;
}

.w-5r {
  width: 5rem;
}

.w-20r {
  width: 20rem;
}

.h-100 {
  height: 100%;
}

.p-x-25px {
  padding-left: 25px;
  padding-right: 25px;
}

.p-x-1rem {
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-x-2rem {
  padding-left: 2rem;
  padding-right: 2rem;
}

.m-t-1rem {
  margin-top: 1rem;
}

.m-b-1rem {
  margin-bottom: 1rem;
}

.m-x-1rem {
  margin-left: 1rem;
  margin-right: 1rem;
}

.m-x-2rem {
  margin-left: 2rem;
  margin-right: 2rem;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-left {}

.flex-jc-center {
  display: flex;
  justify-content: center;
}

.flex-left {
  display: flex;
  justify-content: left;
}

.flex-right {
  display: flex;
  justify-content: right;
}

.scroll-hidden {
  // @include scroll-hidden
}

.f-right {
  float: right;
}

.f-left {
  float: left;
}

.normal-panel {
  box-sizing: border-box;
  padding: 1rem;
  background-color: #ffffff;
}

.filled-block {
  width: 100%;
  height: 100%;
}

// main-container global css
.app-container {
  padding: 20px;
}

.search-form {
  .el-form {
    .el-form-item+.el-form-item {
      margin-left: 16px;
    }
  }
}

.table-row-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;

  .el-button {
    margin-top: .5rem;
    margin-right: .5rem;

    +.el-button {
      margin-left: 0;
    }
  }
}

#nprogress .bar {
  background: $color-primary !important;
}

.error-page,
.success-page {
  font-size: 1rem;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    margin: 0 0 1rem 0;
  }

  .tips {
    margin-top: 2rem;
    font-size: .75rem;
    color: #555;
  }
}

.form-item-appendix-list {
  width: 100%;
  color: #aaaaaa;
  margin-bottom: 1rem;

  .form-item-appendix-item {
    +.form-item-appendix-item {
      margin-top: .5rem;
    }

    padding: .5rem;
    box-sizing: border-box;
    border-radius: .25rem;
    background-color: #F0F2F5;
    justify-content: space-between;
    display: flex;

    .appendix-item-left,
    appendix-item-right {
      display: flex;
      align-items: center;
    }

    .appendix-item-left {
      width: calc(100% - 1rem);
      overflow: hidden;

      .appendix-name {
        width: calc(100% - 1.25rem);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .appendix-item-right {
      display: flex;

      .action-delete-appendix-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;

        .action-delete-appendix {
          color: #D43F1C;
        }
      }
    }
  }

}

.action-row {
  margin-top: 2rem;

  .el-button {
    width: 100%;
  }
}

.form-item-appendix-list {
  width: 100%;
  color: #aaaaaa;
  margin-bottom: 1rem;

  .form-item-appendix-item {
    +.form-item-appendix-item {
      margin-top: .5rem;
    }

    padding: .5rem;
    box-sizing: border-box;
    border-radius: .25rem;
    background-color: #F0F2F5;
    justify-content: space-between;
    display: flex;

    .appendix-item-right {
      .action-delete-appendix {
        color: #D43F1C;
      }
    }
  }
}

.task-page {
  .search-line {
    display: flex;
    align-items: center;
    justify-content: center;

    .van-search {
      width: 85%;
      padding: 0 .25rem 0 0;
      background-color: unset;

      .van-search__content {
        background-color: #ffffff;
        box-shadow: 0 0 0.5rem 0 #eeeeee;
      }
    }

    .van-button {
      width: 15%;
    }
  }

  .task-list {
    margin-top: 1rem;
    // height: calc(100% - 34px - 2rem);
    // overflow: auto;
    padding-bottom: 40px;

    .task-card {
      &:first-child {
        margin-top: .75rem;
      }

      margin-bottom: .75rem;

      .action-edit {
        color: $color-primary;
      }

      .action-delete {
        color: #aaaaaa;
      }
    }
  }
}

.task-detail-page {
  font-size: .85rem;

  .iconfont {
    font-size: inherit;
  }

  .action-download {
    color: $color-primary;
  }

  .simple-title-text {
    font-size: .85rem;
    font-weight: bold;
  }

  .appendix-item {
    display: flex;

    .appendix-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .task-card {
    .appendix-name {
      background-color: #f0f2f5;
      padding: 0 .5rem;
    }
  }

  .task-record-tabs {
    .el-tabs__content {
      overflow: visible
    }

    .el-tabs__header {
      margin-bottom: .5rem;
    }

    .is-top {
      border: none !important;

      .is-active {
        font-weight: bold;
      }
    }

    .trace-record {
      padding: .75rem;
      background-color: #ffffff;
      border-radius: .25rem;
      // box-shadow: 0 0 .5rem 0 #eeeeee;

      +.trace-record {
        margin-top: .75rem;
      }

      .record-row {
        margin-top: 0;
        margin-bottom: 1rem;
      }

      .record-field,
      .appendix-list-title {
        font-weight: bold;
      }

      .record-content,
      .appendix-name {
        color: #777777;
      }
    }
  }

  .new-record {
    .el-form-item {
      background-color: #ffffff;
    }

    .action-submit {
      width: 100%;
      height: 2.5rem;
      margin-top: 1rem;
      font-size: 1rem;
    }
  }
}

.van-page-tabs {
  height: 100%;

  .van-tabs__wrap {
    box-shadow: 0 0px 0.5rem 0 #eeeeee;
  }

  .van-tabs__content {
    box-sizing: border-box;
    height: calc(100% - 44px);
  }

  .van-tab__panel {
    height: 100%;
    box-sizing: border-box;
    padding: 1rem .75rem;
    overflow: auto;
  }
}



.work-order-page {
  .action-permission-requests {
    color: $color-primary;
    font-weight: bold;
  }

  .work-order-list {
    .work-order-card {
      +.work-order-card {
        margin-top: .75rem;
      }
    }

    .simple-circle {
      border-width: .2rem;
      margin-right: .5rem;
    }

    .send-info {
      color: #aaaaaa;
    }
  }

  .screening-form {
    .el-form-item__label {
      padding-right: 0;
      padding-left: .75rem;
    }
  }
}


.el-form-item--medium {
  .van-cell {
    .van-icon {
      line-height: 2.25rem;
    }
  }
}